<template>
  <t-tabs v-model="tabValue">
    <t-tab-panel value="1" label="基本信息">
      <t-form ref="form" :colon="true" class="step-form" :data="formData" labelWidth="180px">
        <t-row style="align-items: stretch">
          <t-col :span="12">
            <t-card class="step-card" size="small" title="（一）江西省交通投资集团有限责任公司微创新成果大赛报名表">
              <t-card class="step-card" size="small" title="基本信息">
                <t-row>
                  <t-col :span="6">
                    <t-form-item label="微创新成果名称" name="name">
                      {{ formData.name }}
                    </t-form-item>
                  </t-col>
                  <t-col :span="6">
                    <t-form-item label="应用领域" name="applicationField">
                      {{ formData.applicationField | filterByDict(dict.type.application_field) }}
                    </t-form-item>
                  </t-col>
                </t-row>
                <t-row>
                  <t-col :span="6">
                    <t-form-item label="微创新成果应用项目" name="applicationProject">
                      {{ formData.applicationProject }}
                    </t-form-item>
                  </t-col>
                  <t-col :span="6">
                    <t-form-item label="创新类别" name="innovationCategory">
                      {{ formData.innovationCategory | filterByDict(dict.type.innovation_category) }}
                    </t-form-item>
                  </t-col>
                </t-row>
                <t-row v-if="!hideInfo">
                  <t-col :span="6">
                    <t-form-item label="申报负责人" name="leaderName">
                      {{ formData.leaderName }}
                    </t-form-item>
                  </t-col>
                  <t-col :span="6">
                    <t-form-item label="工作单位" name="deptName">
                      {{ formData.deptName }}
                    </t-form-item>
                  </t-col>
                </t-row>
                <t-row v-if="!hideInfo">
                  <t-col :span="6">
                    <t-form-item label="身份证号" name="idCard">
                      {{ formData.idCard }}
                    </t-form-item>
                  </t-col>
                  <t-col :span="6">
                    <t-form-item label="手机号" name="phone">
                      {{ formData.phone }}
                    </t-form-item>
                  </t-col>
                </t-row>
                <t-row v-if="!hideInfo">
                  <t-col :span="6">
                    <t-form-item label="职务" name="duty">
                      {{ formData.duty }}
                    </t-form-item>
                  </t-col>
                  <t-col :span="6">
                    <t-form-item label="邮箱" name="email">
                      {{ formData.email }}
                    </t-form-item>
                  </t-col>
                </t-row>
                <t-row v-if="!hideInfo">
                  <t-col :span="6">
                    <t-form-item label="技术职称" name="profTitId">
                      {{ formData.profTitId | filterByTree(profTitOptions) }}
                    </t-form-item>
                  </t-col>
                  <t-col :span="6">
                    <t-form-item label="职称级别" name="profTit">
                      {{ formData.profTit | filterByDict(dict.type.prof_tit) }}
                    </t-form-item>
                  </t-col>
                </t-row>

                <t-row v-if="!hideInfo">
                  <t-col :span="6">
                    <t-form-item label="微信号" name="wechat">
                      {{ formData.wechat }}
                    </t-form-item>
                  </t-col>
                  <t-col :span="6">
                    <t-form-item label="申报时间" name="email">
                      {{ formData.createTime }}
                    </t-form-item>
                  </t-col>
                </t-row>
              </t-card>
              <t-card
                v-if="!hideInfo"
                class="step-card"
                size="small"
              >
              <template #title>
                主要完成人及工作单位<span style="color:red">(单个成果完成人不超过10人，每位成员当年参与的项目不能超过2项)</span>
              </template>
                <t-form-item labelAlign="top" name="innovationMembers" label="">
                  <innovation-member v-model="formData.innovationMembers" :editOpen="false"></innovation-member>
                </t-form-item>
              </t-card>
            </t-card>
          </t-col>
        </t-row>
        <t-row style="align-items: stretch">
          <t-col :span="12">
            <t-card class="step-card" size="small" title="（二）江西省交通投资集团有限责任公司微创新大赛申报成果介绍">
              <t-card
                class="step-card"
                size="small"
                title="成果基本情况，包括但不限于微创新成果的需求背景、基本研究过程及内容、关键技术及创新点、推广应用情况及前景、经济效益与社会效益等。不超过1500字。"
              >
                <t-form-item labelAlign="top" name="introduceContent">
                  <!--                <div v-html="formData.introduceContent">-->
                  <!--                </div>-->
                  <inner-html :content="formData.introduceContent"></inner-html>
                </t-form-item>
              </t-card>
            </t-card>
          </t-col>
        </t-row>
        <t-row style="align-items: stretch">
          <t-col :span="12">
            <t-card class="step-card" size="small" title="相关附件">
              <t-alert style="margin-bottom: 14px" theme="info" title="提交材料内容及要求">
                <div slot="message">
                  <p class="span-txt">参赛微创新成果，应按以下规定提交材料，否则将不予通过形式审查。</p>
                  <!--                <p class="span-txt">（1）申报书</p>-->
                  <!--                <p class="span-txt" style="margin-left: 20px">-->
                  <!--                  包括微创新大赛申报书word版及加盖公章的电子扫描件，申报书表格中填写的相关内容务必与封面保持一致，申报书格式见附件。</p>-->
                  <p class="span-txt">（1）微创新视频</p>
                  <p class="span-txt" style="margin-left: 20px">
                    包括视频演示文件，视频要求时长5分钟以内, 文件大小不超过1G。
                  </p>
                  <p class="span-txt">（2）微创新图片</p>
                  <p class="span-txt" style="margin-left: 20px">
                    包括微创新项目应用现场照片或效果图5-10张，JPG格式，加图片说明。
                  </p>
                  <p class="span-txt">（3）关键技术原理及流程图</p>
                  <p class="span-txt" style="margin-left: 20px">
                    包括微创新成果的关键技术原理图、工艺流程图、制度流程图等，JPG格式，加图片说明。
                  </p>
                  <p class="span-txt">（4）其他证明材料（非必须项，自愿提供）</p>
                  <p class="span-txt" style="margin-left: 20px">
                    包括应用证明、获奖证明、知识产权证明文件、技术查新报告等。
                  </p>
                </div>
              </t-alert>
              <!--            <t-row>-->
              <!--              <t-col :span="6">-->
              <!--                <t-form-item label="申报书" name="wcxApply">-->
              <!--                  <file-upload :multiple="true" accept="application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" v-model="formData.wcxApply" placeholder="包括微创新大赛申报书word版及加盖公章的电子扫描件，申报书表格中填写的相关内容务必与封面保持一致，申报书格式见附件。" tips="">-->
              <!--                    <t-button variant="outline">-->
              <!--                      <t-icon name="cloud-upload" slot="icon"/>-->
              <!--                      上传申报书-->
              <!--                    </t-button>-->
              <!--                  </file-upload>-->
              <!--                </t-form-item>-->
              <!--              </t-col>-->
              <!--            </t-row>-->
              <t-row>
                <t-col :span="12">
                  <t-form-item labelAlign="top" label="微创新视频" name="wcxVideo">
                    <div class="query-form-inline" style="width: 100%">
                      <div
                        style="display: flex; flex-direction: column; width: 100%"
                        v-for="(item, index) in formData.wcxVideoFiles"
                        :key="index"
                      >
                        <video controls height="500px" :src="item.url"></video>
                        <div style="display: flex; flex-direction: row; justify-content: space-between;">
                          <a class="t-button-link" target="_blank" :href="item.url">
                            {{ item.name }}（点击放大播放）
                          </a>
                          <a class="t-button-link" target="_blank"> 如果视频不能播放，点击上方右下脚“三点”下载视频 </a>
                          <!-- <a class="t-button-link" target="_blank" @click="download(item.url, item.name)"> 点击上方更多选项下载视频 </a> -->
                        </div>
                      </div>
                    </div>
                  </t-form-item>
                </t-col>
              </t-row>
              <t-row>
                <t-col :span="12">
                  <t-form-item labelAlign="top" label="微创新图片" name="innovationImages">
                    <innovation-image
                      ref="innovation-image"
                      type="1"
                      key="innovation-image"
                      v-model="formData.innovationImages"
                      :editOpen="false"
                    ></innovation-image>
                  </t-form-item>
                </t-col>
              </t-row>
              <t-row>
                <t-col :span="12">
                  <t-form-item labelAlign="top" label="关键技术原理及流程图" name="innovationGjImages">
                    <innovation-image
                      ref="innovation-gj-image"
                      type="2"
                      key="innovation-gj-image"
                      v-model="formData.innovationGjImages"
                      :editOpen="false"
                    ></innovation-image>
                  </t-form-item>
                </t-col>
              </t-row>
              <t-row>
                <t-col :span="12">
                  <t-form-item labelAlign="top" label="其他证明材料（非必须项，自愿提供）" name="wcxOther">
                    <a
                      class="t-button-link"
                      target="_blank"
                      v-for="(item, index) in formData.wcxOtherFiles"
                      :href="item.url"
                      :key="index"
                    >
                      {{ item.name }}
                    </a>
                  </t-form-item>
                </t-col>
              </t-row>
            </t-card>
          </t-col>
        </t-row>
      </t-form>
    </t-tab-panel>
    <t-tab-panel
      value="2"
      v-if="(!reviewOpen || (reviewOpen && approveType === '2')) && !hideInfo"
      label="审批附件信息"
    >
      <t-row style="align-items: stretch" :gutter="14">
        <t-col :span="12">
          <t-table
            v-if="isMyProject || (isAttributeDept && recommendOpen)"
            row-key="id"
            :columns="projectFileColumns"
            :data="projectFileData"
          >
            <template #id="{ row, rowIndex }">
              {{ rowIndex + 1 }}
            </template>
            <template #op="{ row }">
              <file-upload
                @success="uploadSuccess"
                tips="限制pdf、图片"
                accept="application/pdf,image/*"
                v-model="row.fileIds"
                :moduleKey="row.moduleKey"
                :fileList="row.fileLists"
                :multiple="true"
              >
                <t-button variant="outline">
                  <t-icon name="cloud-upload" slot="icon" />
                  点击上传
                </t-button>
              </file-upload>
            </template>
            <template #c1="{ row }">
              <a v-if="row.c3" class="t-button-link" :href="`${file_domain}/${row.c3}`" target="_blank">{{ row.c1 }}</a>
              <div v-else>{{ row.c1 }}</div>
            </template>
          </t-table>
          <t-table v-else row-key="id" :columns="projectFileColumns" :data="projectFileData">
            <template #id="{ row, rowIndex }">
              {{ rowIndex + 1 }}
            </template>
            <template #c1="{ row }">
              <a v-if="row.c3" class="t-button-link" :href="`${file_domain}/${row.c3}`" target="_blank">{{ row.c1 }}</a>
              <div v-else>{{ row.c1 }}</div>
            </template>
            <template #op="{ row }">
              <div v-for="(item, index) in row.fileLists" :key="index">
                <a class="t-button-link" target="_blank" :href="item.url">
                  {{ item.name }}
                </a>
              </div>
            </template>
          </t-table>
        </t-col>
      </t-row>
    </t-tab-panel>
    <t-tab-panel value="3" label="获奖信息" v-if="awardsConditions.length !== 0">
      <t-row style="align-items: stretch" :gutter="14">
        <t-col :span="12">
          <t-table
            row-key="id"
            :columns="awardsConditionsColumns"
            :data="awardsConditions"
          >
            <template #id="{ row, rowIndex }">
              {{ rowIndex + 1 }}
            </template>
            <template #awardsLevel="{row}">
              {{ row.awardsLevel | filterByDict(dict.type.wcx_awards_level) }}
            </template>
          </t-table>
        </t-col>
      </t-row>
    </t-tab-panel>
  </t-tabs>
</template>

<script>
import { VITE_FILE_DOMAIN } from '@/api/upload'
import { getFiles } from '@/api/common';
import InnovationMember from './innovation-member.vue';
import InnovationImage from './innovation-image.vue';
import FileUpload from '@/components/FileUpload/index.vue';
import InnerHtml from '@/components/InnerHtml/index.vue';
// import axios from 'axios';

export default {
  name: 'innovation-detail',
  dicts: ['application_field', 'innovation_category', 'duty', 'prof_tit', 'wcx_awards_level'],
  components: {
    InnovationMember,
    InnovationImage,
    FileUpload,
    InnerHtml,
  },
  props: {
    objId: [String, Number],
    reviewOpen: {
      type: Boolean,
      default: false,
    },
    recommendOpen: {
      type: Boolean,
      default: false,
    },
    approveType: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      hideInfo: this.$store.state.user.roles.includes('wcxXssc'),
      isMyProject: false,
      isAttributeDept: false,
      tabValue: '1',
      file_domain: VITE_FILE_DOMAIN,
      visible: true,
      profTitOptions: [],
      awardsConditions: [],
      awardsConditionsColumns: [
        {
          colKey: 'id',
          title: '序号',
          align: 'center',
          width: 64,
        },
        {
          colKey: 'year',
          title: '年度',
          align: 'center',
        },
        {
          colKey: 'awardsLevel',
          title: '获奖等级',
          align: 'center',
        },
        {
          colKey: 'awardsAmount',
          title: '奖金(万元)',
          align: 'center',
        },
        {
          colKey: 'note',
          title: '备注',
          align: 'center',
        },
      ],
      formData: {
        name: '',
        applicationField: '',
        applicationProject: '',
        innovationCategory: '',
        leaderName: '',
        profTit: '',
        duty: '',
        phone: '',
        email: '',
        wechat: '',
        deptName: '',
        approveStatus: '1',
        innovationMembers: [],
        introduceContent: '',
        wcxApply: [],
        wcxImage: [],
        wcxImageFiles: [],
        wcxVideo: [],
        wcxVideoFiles: [],
        wcxFlow: [],
        wcxFlowFiles: [],
        wcxOther: [],
        wcxOtherFiles: [],
        sysAttMainVo: {
          sysAttMainIds: [],
        },
      },
      projectFileColumns: [
        {
          colKey: 'id',
          title: '序号',
          align: 'center',
          width: 64,
        },
        {
          colKey: 'c1',
          title: '附件名称',
          align: 'center',
        },
        {
          colKey: 'c2',
          title: '是否必需',
          align: 'center',
        },
        {
          colKey: 'op',
          title: '附件列表',
          align: 'left',
        },
      ],
      projectFileData: [
        {
          id: 1,
          c1: '微创新成果申报书(盖章件)',
          c2: '归口管理单位审批通过后，从系统导出PDF，线下盖章，再由归口管理单位推荐时，上传。',
          moduleKey: 'wcxSBS',
          fileIds: [],
          fileLists: [],
        },
        {
          id: 1,
          c1: '遴选佐证材料',
          c2: '推荐时由归口管理单位上传',
          moduleKey: 'wcxMMLXZZCL',
          fileIds: [],
          fileLists: [],
        },
      ],
    };
  },
  watch: {
    objId: {
      immediate: true,
      handler(val) {
        if (val) {
          this.getObj(val);
        }
      },
    },
  },
  created() {
    this.getProfTitTreeSelect();
    this.getAwardsCondition();
  },
  methods: {
    getAwardsCondition() {
      this.$api.wcx.apply.innovationAwardsGet(this.objId).then(res => {
        if (res.data) {
          this.awardsConditions.push(res.data)
        }
      }).catch(e => {
        this.$message.error(e.toString())
      })
    },
    getProfTitTreeSelect() {
      return this.$api.system.profTit
        .treeselect()
        .then((response) => {
          this.profTitOptions = response.data;
        })
        .catch((e) => {
          this.$message.error(e.toString());
        });
    },
    getObj() {
      // 获取详情
      this.$api.wcx.apply
        .innovationGet(this.objId)
        .then((response) => {
          if (response.data.createUserId === Number(this.$store.state.user.userId)) {
            this.isMyProject = true;
          }
          // 获取附件
          getFiles(this.objId).then((res) => {
            const files = {};
            res.data.forEach((item) => {
              if (!files[item.moduleKey]) {
                files[item.moduleKey] = [];
              }
              files[item.moduleKey].push({
                name: item.fileName,
                url: item.fullFilePath,
                id: item.id,
                filePath: item.filePath,
              });
            });
            this.formData.wcxOtherFiles = files.wcxOther;
            this.formData.wcxImageFiles = files.wcxImage;
            this.formData.wcxVideoFiles = files.wcxVideo;
            this.formData.wcxFlowFiles = files.wcxFlow;
            this.formData.wcxOther = files.wcxOther?.map((val) => val.id);
            this.formData.wcxImage = files.wcxImage?.map((val) => val.id);
            this.formData.wcxVideo = files.wcxVideo?.map((val) => val.id);
            this.formData.wcxFlow = files.wcxFlow?.map((val) => val.id);
            this.projectFileData.forEach((val, index) => {
              this.projectFileData[index].fileLists = files[val.moduleKey] || [];
              this.projectFileData[index].fileIds = files[val.moduleKey]?.map((val) => val.id) || [];
            });
          });
          Object.assign(this.formData, response.data);
        })
        .catch((e) => {
          this.$message.error(e.toString());
        });

      // 判断是否归口管理单位管理员账号
      this.$api.system.dept
        .isAttributeDept()
        .then((response) => {
          if (response.data) {
            this.isAttributeDept = true;
          }
        })
        .catch((e) => {
          this.$message.error(e.toString());
        });
    },
    // download(url, name) {
    //   axios.get(url, { responseType: "blob" }).then(response => {
    //     const blob = new Blob([response.data]);
    //     const link = document.createElement("a");
    //     link.href = URL.createObjectURL(blob);
    //     link.download = name;
    //     link.click();
    //     URL.revokeObjectURL(link.href);
    //   }).catch(console.error);
    // },
    uploadSuccess(ids) {
      this.$api.wcx.apply
        .innovationUpdate({
          id: this.objId,
          sysAttMainVo: {
            sysAttMainIds: ids,
          },
        })
        .then((val) => {
          this.$message.success('上传成功');
        })
        .catch((e) => {
          this.$message.error(e.toString());
        });
    },
    closeDialog() {
      this.$emit('update:visible', false);
    },
  },
};
</script>

<style lang="less" scoped>
.t-row {
  margin-bottom: 14px;
}
.t-tab-panel {
  padding: 10px;
}
.step-card {
  height: 100%;
  margin-bottom: 14px;
}
</style>
